<template>
<div>
    <div class="head">
      <el-button :icon="Icon.Search" @click="showForm">财务凭证查询</el-button>
    </div>
  <el-dialog v-model="isShowForm"  class="formclass" draggable width="600px">
      <el-form
          :model="searchForm"
          label-width="100px"
      >
        <el-form-item label="单号" prop="orderId">
          <el-input v-model="searchForm.orderId" placeholder="请输入绑定财务凭证的单号"/>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="财务凭证类型" prop="voucherTypeValue">
              <el-select v-model="searchForm.voucherTypeValue" clearable="true" filterable fit-input-width="true" placeholder="请选择财务凭证类型" prop="voucherTypeValue"
                         style="width: 145px" @change="getType">
                <el-option
                    v-for="item in voucherTypeValue"
                    :key="item"
                    :label="item.value"
                    :value="item.code">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="cancelExpert">取消</el-button>
            <el-button type="primary" @click="searchOk">确认</el-button>
        </span>
      </template>
    </el-dialog>
    <el-divider></el-divider>
    <el-scrollbar>
      <el-table  :data="tableData"
                 border
                 height="542px"
                 row-style="height:50px"
                 stripe style=" width: 100%"
                 tooltip-effect="dark">
        <el-table-column :index="getIndex" label="序号" type="index" width="60"/>
        <el-table-column label="财务凭证代码"  prop="voucherId" width="230"/>
        <el-table-column label="单号" prop="orderId" width="230"/>
        <el-table-column label="创建时间" prop="createdDate" width="175"/>
        <el-table-column label="金额(单位:元)" prop="price" width="125"/>
        <el-table-column label="财务凭证类型" prop="voucherType" width="121"/>
        <el-table-column label="财务凭证信息"  prop="information"/>

      </el-table>
      <el-pagination
          :current-page=pageNow
          :page-size=pageSize
          :page-sizes="[10,20,30,40]"
          :total=totalSize
          background
          layout="total, prev, pager, next"
          style="margin-top: 15px"
          @current-change="pageChange"
      >
      </el-pagination>

    </el-scrollbar>
  </div>
</template>

<script>
import Header from "@/components/Header";
import {MoreFilled, Search} from "@element-plus/icons-vue";
import axios from "axios";
import {ElMessage, ElNotification} from "element-plus";
export default {
name: "FinancilVoucherManage",
  data(){
    return{
      Icon:{Search,MoreFilled},
      tableData:[
      ],
      rowData:[
      ],
      searchForm:{
        voucherType:'',
        orderId:''
      },
      voucherTypeValue:[
        {code:'0',value:'客户结账凭证'},
        {code:'1',value:'客户退款凭证'},
        {code:'2',value:'客户核算凭证'},
        {code:'3',value:'企业付款凭证'},
      ],
      pageSize:10,
      totalSize:100,
      pageNow:1,
      isShowForm:false
    }
  },
  methods:{

    cancelExpert() {
      this.isShowForm = false
      ElNotification.success({
        title:'取消操作',
        offset: 100,
      })
      this.loadPost()
    },
    searchOk(){
      console.log('o0e000---')
      console.log(this.searchForm)
      console.log('---')
      this.$axios.post("http://localhost:1070/voucher",{
        pageNow:this.pageNow,
        pageSize:this.pageSize,
        voucherType:this.searchForm.voucherType,
        orderId:this.searchForm.orderId
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
          this.$message({
            type: 'success',
            message: '查询成功!'
          });
        }else {
          this.$message({
            type: 'error',
            message: '查询失败!'
          });
          this.tableData = []
          this.totalSize = 0
        }

      })
      this.isShowForm = false
    },
    showForm(){
      this.isShowForm = true
      this.searchForm = {voucherType:'',orderId:''}
    },

    getType(value){
      console.log(value)
      this.searchForm.voucherTypeValue = value
    },

    getIndex(index){
      index = index + 1 + (this.pageNow - 1) * this.pageSize
      return index
    },
    pageChange(val){
      this.pageNow = val
      console.log(this.pageNow)
      this.$axios.post("http://localhost:1070/voucher",{
        pageNow:this.pageNow,
        pageSize:this.pageSize,
      }).then(res=>{
        res=res.data
        if (res.code == '200') {
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }

      })
    },
    loadPost(){
      this.$axios.post("http://localhost:1070/voucher",{
        pageNow:this.pageNow,
        pageSize:this.pageSize
      }).then(res=>{
        res=res.data
        if (res.code == '200'){
          this.totalSize = res.data.totalRows
          this.tableData = res.data.rowData
          console.log(res.data)
        }else {
          this.tableData = []
          this.totalSize = 0
        }
      })
    },

  },

  beforeMount() {
    this.loadPost()
  }


}
</script>

<style scoped>
body .el-table th.gutter {
  display: table-cell !important
}
.co1{
  background: #77c7d0;

}
.co2{
  background: #d9bf17;
}
.oo{
  background: #97d578
}
.formclass{
  border-radius: 20px;
}
.head{
  margin: 10px 0;
  text-align: left;
}
</style>